<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Widgets in GTK#</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, Widgets, C#, programming, Linux">
<meta name="description" content="In this part of the GTK# tutorial, we introduce some widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets in GTK#</h1>

<p>
In this part of the GTK# programming tutorial, we will introduce some GTK# widgets.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Over the years, several 
widgets became a standard in all toolkits on all OS platforms. For example a button, 
a check box or a scroll bar. The GTK# toolkit's philosophy is to keep the number of 
widgets at a minimum level. More specialized widgets are created as custom GTK# widgets.  
</p>


<h2>Label</h2>

<p>
The <code>Label</code> widget shows text. 
</p>

<div class="codehead">label.cs</div> 
<pre class="code">
using Gtk;
 
class SharpApp : Window {
 
   string text = @"Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
You say why did you do it with him today?
and sniff me out like I was Tanqueray

cause you're my fella, my guy
hand me your stella and fly
by the time I'm out the door
you tear men down like Roger Moore

I cheated myself
like I knew I would
I told ya, I was trouble
you know that I'm no good";


    public SharpApp() : base("You know I'm No Good")
    {
        BorderWidth = 8;
        SetPosition(WindowPosition.Center);
        
        DeleteEvent += delegate { Application.Quit(); };

        Label lyrics = new Label(text);
        Add(lyrics);
        
        ShowAll();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
    string text = @"Meet you downstairs in the bar and heard
your rolled up sleeves and your skull t-shirt
...
</pre>

<p>
In C# programming language, multiline string is preceded with 
the @ character. 
</p>

<pre class="explanation">
BorderWidth = 8;
</pre>

<p>
The <code>Label</code> is surrounded by some empty space. 
</p>

<pre class="explanation">
Label lyrics = new Label(text);
Add(lyrics);
</pre>

<p>
The <code>Label</code> widget is created and added to the window. 
</p>

<img src="/img/gui/sharpgtk/lyrics.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>


<h2>CheckButton</h2>

<p>
<code>CheckButton</code> is a widget, that has two states. On and Off. 
The On state is visualised by a check mark. It is used to denote some boolean
property.
</p>

<div class="codehead">checkbutton.cs</div> 
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("CheckButton")
    {
        SetDefaultSize(250, 200);
        SetPosition(WindowPosition.Center);
        
        DeleteEvent += delegate { Application.Quit(); };
        
        CheckButton cb = new CheckButton("Show title");
        cb.Active = true;
        cb.Toggled += OnToggle;

        Fixed fix = new Fixed();
        fix.Put(cb, 50, 50);

        Add(fix);
        ShowAll();
    }


    void OnToggle(object sender, EventArgs args) 
    {
        CheckButton cb = (CheckButton) sender;

        if (cb.Active) {
            Title = "CheckButton";
        } else {
            Title = " ";
        }
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <code>CheckButton</code>. 
</p>

<pre class="explanation">
CheckButton cb = new CheckButton("Show title");
</pre>

<p>
<code>CheckButton</code> widget is created. 
</p>

<pre class="explanation">
cb.Active = true;
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>

<pre class="explanation">
CheckButton cb = (CheckButton) sender;
</pre>

<p>
Here we cast the sender object to <code>CheckButton</code> class.
</p>

<pre class="explanation">
if (cb.Active) {
    Title = "CheckButton";
} else {
    Title = " ";
}
</pre>

<p>
Depending on the <code>Active</code> property of the 
<code>CheckButton</code>, we show or hide the title
of the window. 
</p>

<img src="/img/gui/sharpgtk/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>


<h2>ComboBox</h2>

<p>
<code>ComboBox</code> is a widget that allows the user to choose from a list of options.
</p>

<div class="codehead">combobox.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 

    Label label;

    public SharpApp() : base("ComboBox")
    {
       string[] distros = new string[] {"Ubuntu",
            "Mandriva",
            "Red Hat",
            "Fedora",
            "Gentoo" };


        SetDefaultSize(250, 200);
        SetPosition(WindowPosition.Center);
        BorderWidth = 7;
        DeleteEvent += delegate { Application.Quit(); };
        
        Fixed fix = new Fixed();

        ComboBox cb = new ComboBox(distros);
        cb.Changed += OnChanged;
        label = new Label("-");
        
        fix.Put(cb, 50, 30);
        fix.Put(label, 50, 140);
        Add(fix);

        ShowAll();
    }

    void OnChanged(object sender, EventArgs args)
    {
        ComboBox cb = (ComboBox) sender;
        label.Text = cb.ActiveText;
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
The example shows a combo box and a label. The combo box has a list of six options. 
These are the names of Linux Distros. The label widget 
shows the selected option from the combo box. 
</p>

<pre class="explanation">
string[] distros = new string[] {"Ubuntu",
    "Mandriva",
    "Red Hat",
    "Fedora",
    "Gentoo" };
</pre>

<p>
This is an array of strings, that will be shown in the <code>ComboBox</code> widget. 
</p>

<pre class="explanation">
ComboBox cb = new ComboBox(distros);
</pre>

<p>
The <code>ComboBox</code> widget is created. 
The constructor takes the array of strings as a parameter. 
</p>

<pre class="explanation">
void OnChanged(object sender, EventArgs args)
{
    ComboBox cb = (ComboBox) sender;
    label.Text = cb.ActiveText;
}
</pre>

<p>
Inside the <code>OnChanged()</code> method, we get the selected
text out of the combo box and set it to the label. 
</p>

<img src="/img/gui/sharpgtk/combobox.png" alt="ComboBox">
<div class="figure">Figure: ComboBox</div>



<h2>Image</h2>

<p>
The next example introduces the <code>Image</code> widget.
This widget displays pictures. 
</p>

<div class="codehead">image.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 
    Gdk.Pixbuf castle;

    public SharpApp() : base("Red Rock")
    {
        BorderWidth = 1;
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); };

        try {
            castle = new Gdk.Pixbuf("redrock.png");
        } catch {
            Console.WriteLine("Image not found");
            Environment.Exit(1);
        }

        Image image = new Image(castle);
        Add(image);
        
        ShowAll();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
We show the Red Rock castle in the window. 
</p>

<pre class="explanation">
 try {
     castle = new Gdk.Pixbuf("redrock.png");
 } catch {
     Console.WriteLine("Image not found");
     Environment.Exit(1);
 }
</pre>

<p>
We create the <code>Gdk.Pixbuf</code> widget. We put 
the constructor between the try/catch keywords to handle possible 
errors. 
</p>

<pre class="explanation">
Image image = new Image(castle);
Add(image);
</pre>

<p>
<code>Image</code> widget is created and added to the window. 
</p>

<img src="/img/gui/sharpgtk/redrock.jpg" alt="Image">
<div class="figure">Figure: Image</div>


<p>
In this chapter, we showed the first pack of basic widgets of the
GTK# programming library. 
</p>


<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 23, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

